<template>
	<basicContainer>
		<avue-crud :option="option" :data="data" :page="page" v-model="form" ref="crud" @search-change="searchChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad" :before-open="beforeOpen">
			<template slot="menuRight">
				<el-radio-group @change="searchReset" v-model="status" size="mini" style="margin-right: 50px;">
					<el-radio-button label="">所有</el-radio-button>
					<el-radio-button :label="item.value" v-for="(item,i) in statusItem" :key="i">{{item.label}}</el-radio-button>
				</el-radio-group>
			</template>
			<template slot-scope="{row}" slot="status">
				<el-tag v-for="(item,i) in statusItem" size="mini" :key="i" :type="item.type" v-if="item.value == row.status">{{item.label}}</el-tag>
			</template>
		</avue-crud>
		<el-dialog title="生成装箱建议" width="800px" :visible.sync="dialogShow" v-if='dialogShow' :modal-append-to-body='false'>
			<add @closeDialog="closeHandle">
			</add>
		</el-dialog>
		<el-drawer title="详情" size="40%" :visible.sync="drawerVisible" v-if='drawerVisible' :modal-append-to-body='false'>
			<detail :boxNum="form.boxNum">
			</detail>
		</el-drawer>
	</basicContainer>
</template>

<script>
	import request from '@/router/axios';
	import detail from './pkgDetail.vue';
	import add from './pkgAdd.vue'
	export default {
		components: {
			detail,add
		},
		data() {
			return {
				boxNum: '',
				dialogShow:false,
				drawerVisible: false,
				statusItem: [{
					value: 0,
					type: 'info',
					label: '未处理'
				}, {
					value: 1,
					type: '',
					label: '装箱'
				}, {
					value: 2,
					type: '',
					label: '出运'
				}],
				status: "",
				query: {},
				form: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					delBtn: false,
					editBtn: false,
					viewBtn: true,
					addBtnText:'生成装箱建议',
					refreshBtn: false,
					excelBtn: true,
					menuWidth: 80,
					column: [{
							label: "箱号",
							prop: "boxNum",
							searchPlaceholder: '箱号',
							search: true,
							width: 200
						},
						{
							label: "客户号",
							prop: "customCode",
							search: true,
							width: 150
						},
						{
							label: "相关订单",
							prop: "orderCodes"
						},
						{
							label: "纸箱类型",
							prop: "boxType"
						},
						{
							label: "数量",
							prop: "quantity",
							width: 100
						},
						{
							label: "重量",
							prop: "weight",
							width: 100
						},
						{
							label: "体积",
							prop: "volume",
							width: 100
						},
						{
							label: "状态",
							prop: "status",
							width: "80px",
							slot: true
						},
						{
							label: "时间",
							prop: "createdOn",
							width: 160
						},
					]
				},
				data: []
			};
		},
		created() {
			this.findObject(this.option.column, 'status').dicData = this.statusItem;
		},
		methods: {
			closeHandle(e) {
				this.dialogShow = false;
				if (e){
					this.searchReset();
				}
			},
			beforeOpen(done, type) {
				if (type == "view") {
					this.drawerVisible = true;
				} else if (type == "add"){
					this.dialogShow = true;
				} else {
					done();
				}
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '2/api/OrderPkg/pages',
					params: {
						key: this.query.boxNum == undefined ? '' : this.query.boxNum,
						type: this.query.customCode == undefined ? '' : this.query.customCode,
						status: this.status == undefined ? '' : this.status,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
